<template>
  <section class="sec">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for='(title,index) in matchedArr'
                          :key='index'>{{title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </section>
</template>

<script>

import { mapState } from "vuex";
import { Breadcrumb, BreadcrumbItem } from 'element-ui'
export default {
  name: "bread",
  data () {
    return {
      matchedArr: [],
      books: ""
    };
  },
  props: ["bread"],
  computed: mapState({
    stateObject: state => state.stateObject
  }),
  watch: {
    books(v,vv){
      console.log(v,"&&&");
      this.books=v;
    },
    $route (v, vv) {
      this.commonDo(v)
      this.breadsShow()
    }
  },
  components: {
    elBreadcrumb: Breadcrumb,
    elBreadcrumbItem: BreadcrumbItem
  },
  created () {
    this.commonDo(this.$route)
    this.breadsShow()
  },
  methods: {
    commonDo (v) {
      let from = v.query.from
      console.log(v.query.from);
      if (from == "header") {
        this.books = "关于我们,认识我们,银行简介"
      } else if (from == "news") {
        this.books = "银行公告,银行新闻"
      } else if (v.path == "sitemap") {
        this.books = "网站地图"
      } else if (from == "article") {
      } else if (v.query.articleId == "10000") {
        this.books = "汇率"
      } else {
        this.books = ""
      }
    },
    breadsShow () {
      if (this.books) {
        this.matchedArr = ("首页," + this.books).split(",")
      } else if (this.stateObject.myvuex.books != "首页") {
        this.matchedArr = ("首页," + this.stateObject.myvuex.books).split(",")
      } else {
        this.matchedArr = ("首页," + sessionStorage.getItem("books")).split(",")
      }

    }
  }
};
</script>

<style lang="scss" >
.pointer {
  cursor: pointer;
}
.el-breadcrumb__inner {
  color: #333333;
  font-size: 14px;
}
</style>